<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转木马 幻灯片开发</title>
<link type="text/css" rel="stylesheet" href="carousel.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carousel.js"></script>
</head>
<body style="padding:50px;">
<div class="J_Poster poster-main" data-setting=''>
	<div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
    	<li class="poster-item"><a href="#"><img src="1.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>
<p style="height:50px;"></p>
<div class="J_Poster poster-main" data-setting='{
                                                                                    "width":800,
                                                                                    "height":270,
                                                                                    "posterWidth":640,
                                                                                    "posterHeight":270,
                                                                                    "scale":0.8,
                                                                                    "autoPlay":true,
                                                                                    "delay":5000,
                                                                                    "speed":300,
                                                                                    "vericalAlign":"top"
																					}'>
	<div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
    	<li class="poster-item"><a href="#"><img src="1.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>
<script>

$(function(){
	Carousel.init($(".J_Poster"));
});
</script>
















</body>
</html>
